<template>
  <a-list
      size="large"
      rowKey="id"
      :loading="loading"
      itemLayout="vertical"
      :dataSource="blogList"
  >
    <a-list-item :key="item.blogId" slot="renderItem" slot-scope="item">

      <div class="resContent" style="line-height: 30px">
        <span class="title">博客标题:</span> <span class="cursor" @click="goBlogDetail(item.blogId)">{{ item.blogTitle }}</span><br/>
        <span class="title">博客内容:</span> 点击标题查看详情 <br/>
        <span class="title">个性标签:</span> <a-tag class="cursor" v-for="tag in item.blogLableList || []" :key="tag">{{tag}}</a-tag> <br/>
        <span class="title">发布时间:</span> {{ $moment(item.blogPushTime).format('yyyy-MM-DD HH:mm:ss') }}<br/>
        <span class="cursor" @click="goBlogDetail(item.blogId)">
          <icon-text type="like-o" :text="item.blogNiu" />
          <icon-text type="message" :text="item.commentNum" />
        </span>
      <div>
          <a-space>
            <a-button v-if="userId == $store.state.user.loginUser.userId" type="danger" ghost size="small" @click="removeModal(item)">
              删除
            </a-button>
          </a-space>
        </div>
      </div>
    </a-list-item>
    <div slot="footer" v-if="blogList.length > 0" style="text-align: center; margin-top: 16px;">
      <a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>
    </div>
  </a-list>
</template>

<script>
import IconText from '@/components/myinfo/IconText'
import {getMyBlogList, removeBlog} from '@/api/blog'
import {addRecycle} from "@/api/recycle";
import {removeRole} from "@/api/role";

export default {
  name: 'MyBlog',
  components: {
    IconText
  },
  data () {
    return {
      pageSize:3,
      loading: true,
      loadingMore: false,
      blogList: []
    }
  },
  props:{
    userId:undefined
  },
  mounted () {
    this.getList(this.pageSize)
  },
  methods: {
    async getList (pageSize) {
      const result = await getMyBlogList(pageSize, this.userId);
      const { code,data,msg } = result;
      if (code === 200){
        this.loading = false;
        this.blogList = data;
      } else {
        this.$message.error(msg);
      }
    },
    // 加载更多
    loadMore () {
      this.loadingMore = true
      try {
        this.getList(this.pageSize + 3);
      } finally {
        this.loadingMore = false;
      }
    },
    // 删除模态框
    removeModal(item){
      const _this = this;
      this.$confirm({
        title: '删除博客',
        content: '真的要删除嘛?',
        okText: '确认',
        okType: 'danger',
        cancelText: '放弃',
        onOk() {
          removeBlog(item.blogId).then(res => {
            const { code,msg } = res;
            if (code === 200){
              _this.$message.success(msg);
              _this.getList(_this.pageSize);
            } else {
              _this.$message.error(msg);
            }
          }).catch(error => {
            console.log(error);
            _this.$message.error("操作异常");
          })
        },
        onCancel() {
          console.log("取消了删除");
        },
      });
    },
    // 去博客详情页
    goBlogDetail(blogId){
      if (blogId){
        this.$router.push({
          name:'blogDetail',
          params:{
            blogId:this.$encry(blogId)
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.antd-pro-components-article-list-content-index-listContent {
  .description {
    max-width: 720px;
    line-height: 22px;
  }
  .extra {
    margin-top: 16px;
    color: red;
    line-height: 22px;

    & /deep/ .ant-avatar {
      position: relative;
      top: 1px;
      width: 20px;
      height: 20px;
      margin-right: 8px;
      vertical-align: top;
    }

    & > em {
      margin-left: 16px;
      color: black;
      font-style: normal;
    }
  }
}
.title{
  font-weight: 600;
}
</style>
